<template>

</template>

<script>

  export default {
    name: 'App'
  }
</script>

<style lang="scss">

  @import "./assets/lop-icon.css";

  [class^="lop-"] {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #5e6d82;
    letter-spacing: 1.2px;
    line-height: 22px;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .lop-hide {
    display: inline !important;
    opacity: 0;
    font-size: 14px;
  }

  .lop-hide-none {
    display: none !important;
  }

  .lop-msg-box {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    min-height: 70px;
    min-width: 400px;
    display: flex;
    z-index: -1;
    flex-direction: column;

    .lop-msg {
      width: 100%;
      height: 50px;
      line-height: 30px;
      padding: 10px 20px;
      border-radius: 5px;
      margin: 10px 0;
      display: none;
      align-items: center;
      position: relative;

      .iconfont {
        display: inline-block;
        position: absolute;
        height: 30px;
        font-size: 16px;
        margin-right: 6px
      }

      .lop-msg-text {
        width: calc(100% - 30px);
        margin-left: 30px;
        height: 30px;
        line-height: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        font-size: 16px;
      }
    }
  }

  .lop-title {
    position: relative;
    font-size: 20px;
    color: #303133;
    font-weight: bold;
  }

  .lop-detail {
    position: relative;
    font-size: 14px;
    color: #606266;
    font-weight: 400;
  }

  .lop-text {
    position: relative;
    font-size: 14px;
    color: #909399;
    font-weight: 400;
  }

  .lop-msg-success {
    box-shadow: rgba(103, 194, 58, 0.5) 0 0 6px;
    background: #f0f9eb;

    > * {
      color: #67C23A;
    }
  }

  .lop-msg-warn {
    box-shadow: rgba(230, 162, 60, 0.5) 0 0 6px;
    background: #fdf6ec;

    > * {
      color: #E6A23C;
    }
  }

  .lop-msg-error {
    box-shadow: rgba(216, 30, 6, 0.5) 0 0 6px;
    background: #faccc4;

    > * {
      color: #d81e06;
    }
  }


</style>
